<style scoped>

</style>
<template>
<div id="topBody">
  <Row :gutter="16">
    <Col span="20">
      <img id="pic" class="picc" src="../../assets/chejian.jpg" alt="" style="z-index: 100;">
    </Col>
    <Col span="4" id="store" style="border: solid 1px grey;">
      <div style="height:40px;width:100%;text-align:center;padding:10px;">标签库</div>
      <div style="height:40px;width:100%;text-align:center;border:1px solid #eee;padding:5px;">
        <Icon type="android-pin"></Icon>
        <span style="display:inline-block;background:grey;padding:5px;color:#fff;border-radius:4px;font-size:12px;">可编辑标签</span>
      </div>
      <div style="height:40px;width:100%;text-align:center;border:1px solid #eee;padding:10px;"> 设备列表</div>
      <Col span="8" v-for="(item,index) in storeList" :key="'c'+index">
        <dragger imgUrl="" :title="item.name" :oid="item.id" v-show="item.show"></dragger>
      </Col>
      <div>
        <button type="success" @click="detail">驴打滚看看</button>
      </div>
    </Col>
  </Row>
</div>
</template>

<script>

  import Dragger from '../dragger/dragger'

  export default {
    name: 'my',
    mounted: function () {
      let that = this
      // 阻断默认的浏览器 拖拽 打开超链接的行为
      document.addEventListener('drop', function (event) {
        event.preventDefault()
      })
      document.addEventListener('dragover', function (event) {
        event.preventDefault()
      })

      let targetObj = document.querySelector('#pic')
      let storeObj = document.querySelector('#store')
      targetObj.addEventListener('dragenter', function (event) {
        // 当被鼠标拖动的对象进入其容器范围内时触发此事件
        console.log('dragenter当被鼠标拖动的对象进入其容器范围内时触发此事件:event.target.className  ', event.target.className)
        if (event.target.className === 'picc') {
          event.target.style.border = 'green 3px dashed'
        }
      })
      storeObj.addEventListener('dragenter', function (event) {
        event.preventDefault()
        // 当被鼠标拖动的对象进入其容器范围内时触发此事件
        console.log('dragenter当被鼠标拖动的对象进入其容器范围内时触发此事件:event.target.className  ', event)
        if (event.target.className === 'ivu-col ivu-col-span-4') {
          event.target.style.border = 'red 3px dashed'
        }
        if (event.target.className === 'ivu-icon ivu-icon-easel' || event.target.className === '') {
          let storeObj = document.querySelector('#store')
          storeObj.style.border = 'red 3px dashed'
        }
      })
      targetObj.addEventListener('dragover', function (event) {
        event.preventDefault()
      })
      targetObj.addEventListener('drop', function (event) {
        // 放下事件
        event.preventDefault()
        console.log('drop在一个拖动过程中，释放鼠标键时触发此事件 ', event.target.className)
        if (event.target.className === 'picc') {
          let tid = event.dataTransfer.getData('tid')
          let tempItem = that.storeList[that.storeList.findIndex(item => item.id === tid)]
          event.target.style.border = ''
          if (tempItem.show) {
            //  为ture，则是 从右边 拖到左边的
            let data = document.getElementById(tid)
            let dataClone = data.cloneNode(true)
            dataClone.style.zIndex = '128'
            dataClone.style.position = 'absolute'
            tempItem.left = dataClone.style.left = event.offsetX - 20 + 'px'
            tempItem.top = dataClone.style.top = event.offsetY - 20 + 'px'
            // 复制的元素 绑定 拖动的事件
            that.tieDrags(dataClone)
            // 执行添加元素 到图片之上
            event.target.after(dataClone)
            // 添加到fixList
            that.fixList.push(tempItem)
            // 右边被拖选 选项 隐藏
            tempItem.show = false
            // 复制的元素 添加 双击事件，双击删除
            dataClone.addEventListener('dblclick', function (event) {
              dataClone.parentNode.removeChild(dataClone)
              // 恢复右边原始选项的 显示
              let nowData = that.storeList[that.storeList.findIndex(item => item.id === tid)]
              nowData.show = true
              that.delFromFixList(tid)
            })
          } else {
            // false 已经绑定到左边，修改位置的
            let leftObj = document.getElementById(tid)
            console.log('false 已经绑定到左边，修改位置的', leftObj)
            leftObj.style.left = event.offsetX - 20 + 'px'
            leftObj.style.top = event.offsetY - 20 + 'px'
          }
        } else {
          console.log(' 不在picc 里面的内容.........')
        }
      })
      // 拖动左边的回到选项框中，删除固定的元素
      storeObj.addEventListener('drop', function (event) {
        event.preventDefault()
          console.log('storeObj', event.target.className)
        if (event.target.className === 'ivu-col ivu-col-span-4' || event.target.className === '' || event.target.className === 'ivu-icon ivu-icon-easel') {
          let tid = event.dataTransfer.getData('tid')
          let data = document.getElementById(tid)
          let nowData = that.storeList[that.storeList.findIndex(item => item.id === tid)]
          if (nowData.show) {
            // 如果从 右边拖起又放回右边，就不处理
            return
          }
          data.parentNode.removeChild(data)
          // 恢复右边原始选项的 显示
          nowData.show = true
          that.delFromFixList(tid)
        }
      })
      targetObj.addEventListener('dragleave', function (event) {
        event.preventDefault()
        console.log('dragleave当被鼠标拖动的对象离开其容器范围内时触发此事件 ')
        if (event.target.className === 'picc') {
          event.target.style.border = ''
        }
      })
      storeObj.addEventListener('dragleave', function (event) {
        event.preventDefault()
        console.log('dragleave当被鼠标拖动的对象离开其容器范围内时触发此事件 ')
        if (event.target.className === 'ivu-col ivu-col-span-4') {
          event.target.style.border = ''
        }
      })
    },
    components: {Dragger},
    data: function () {
      return {
        storeList: [{
          name: '5号检测仪',
          id: '2',
          show: true
        }, {
          name: '6号检测仪',
          id: '3',
          show: true
        }, {
          name: '7号检测仪',
          id: '4',
          show: true
        }, {
          name: '8号检测仪',
          id: '5',
          show: true
        }, {
          name: '9号检测仪',
          id: '6',
          show: true
        }, {
          name: '1号检测仪',
          id: '7',
          show: true
        }],
        fixList: [],
        notFixList: [{
          name: '5号检测仪',
          id: '2',
          show: true
        }, {
          name: '6号检测仪',
          id: '3',
          show: true
        }, {
          name: '7号检测仪',
          id: '4',
          show: true
        }, {
          name: '8号检测仪',
          id: '5',
          show: true
        }, {
          name: '9号检测仪',
          id: '6',
          show: true
        }, {
          name: '1号检测仪',
          id: '7',
          show: true
        }]
      }
    },
    methods: {
      tieDrags (obj) {
        obj.addEventListener('dragstart', this.dragStart, false)
        obj.addEventListener('dragend', this.dragend, false)
      },
      dragStart: function (event) {
        event.dataTransfer.setData('tid', event.target.id)
        event.target.style.opacity = '0.5'
        console.log('左边已经固定的图标开始 执行拖拽.......')
      },
      dragend: function (event) {
        event.preventDefault()
        // 恢复透明度
        console.log('左边的图标完成拖拽.........', event)
        event.target.style.opacity = ''
      },
      detail: function () {
        console.log('left', this.fixList)
        console.log('right', this.notFixList)
        this.$Notice.error({
          title: 'show data result',
          desc: 'left side: ' + JSON.stringify(this.fixList)
        })
        this.$Notice.success({
          title: 'show data result',
          desc: 'right side: ' + JSON.stringify(this.notFixList)
        })
      },
      delFromFixList: function (id) {
        this.fixList.splice(this.fixList.findIndex(item => item.id === id), 1)
      }
    }
  }

</script>

<style scoped>

</style>
